<script setup>
import {onMounted, ref, toRefs, watch} from "vue";
import {useStore} from "vuex";
import ReadLink from "@/components/common/link/ReadLink.vue";

const props = defineProps({
  params: {type: String},
})
const store = useStore();

const replyId = ref();
const topicId = ref();
const page = ref();
const showDialog = () => store.commit("Dialog/showDialog", {name: 'singleReply', data: replyId.value})
const {params} = toRefs(props)

const parse = (param) => {
  const [r, t, p] = param.split(',')
  replyId.value = r ? Number(r) : undefined;
  topicId.value = t ? Number(t) : undefined;
  page.value = p ? Number(p) : undefined;
}

onMounted(() => {
  parse(params.value)
})

watch(params, (nv) => {
  parse(nv)
})

</script>

<template>
  <span v-if="replyId || topicId">
    <el-button class="reply-plus" size="small" type="primary" @click="showDialog">R</el-button>
    <read-link :page="page" :pid="replyId" :tid="topicId" bracket>
      <slot></slot>
    </read-link>
  </span>
</template>

<style scoped>

</style>